<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        window.onload=function(){
            //创建一个广州节点，添加到city下

            myClick("btn01",function(){
                //创建广州节点<li>广州<li>
                //创建li元素节点
                /* 
                    document.createElement()
                    可以用于创建一个元素节点对象
                    它需要一个标签名作为参数，将会根据该标签名创建元素节点对象
                    并将创建好的对象作为返回值返回
                */
                var li=document.createElement("li");
                //创建广州文本节点
                /* 
                    document.createTextNode()
                    可以用来创建一个文本节点对象
                    需要一个文本内容作为参数，将会根据改内容创建文本节点，将新的节点返回

                 */
                var gzText=document.createTextNode("广州");
                //将gzText设置li的子节点
                /* 
                    appendChild()
                    -想一个父节点中添加一个新的子节点
                    -用法：父节点.appendChild(子节点)
                */
               li.appendChild(gzText);
               //获取 id 为city的节点
               var city=document.getElementById("city");
               //将广州添加到city下
               city.appendChild(li);

               

            });

               //将广州节点插入到bj前面
               myClick("btn02",function(){
                   var li=document.createElement("li");
                   var gzText=document.createTextNode("广州");
                   li.appendChild(gzText);
                   //获取id 为北京的节点
                   var bj=document.getElementById("bj");
                   //获取city
                   var city=document.getElementById("city");
                   
                   /* 

                    insertBefore()
                    -可以在指定的子节点前插入新的子节点
                    -语法：
                    父节点：insertBefore(新节点，旧节点)
                   */
                  city.insertBefore(li,bj);
               });



            //使用广州节点替换id=bj节点
               myClick("btn03",function(){
                   //创建一个广州节点
                   var li=document.createElement("li");
                   var gzText=document.createTextNode("广州");
                   li.appendChild(gzText);
                   //获取id 为北京的节点
                   var bj=document.getElementById("bj");
                   //获取city
                   var city=document.getElementById("city");
                   /* 
                    replaceChild（）
                    -可以使用指定的子节点替换已有的子节点
                    -语法：父节点.replaceChild(新节点,旧节点)；
                   */
                  city.replaceChild(li,bj);

                
        
               });
            //删除bj节点
            myClick("btn04",function(){
                var bj=document.getElementById("bj");
                var city=document.getElementById("city");
                /* 
                    removeChild()
                    -可以删除一个子节点
                    -语法：父节点.removeChild(子节点)
                            子节点.parentNode.removeChild(子节点)
                */
                city.removeChild(bj);
                // bj.parentNode.removeChild(bj);有问题
            });
            //读取city内的html代码
            myClick("btn05",function(){
                var city=document.getElementById("city");
                alert(city.innerHTML);
            })
            //设置bj内的html代码


            myClick("btn06",function(){
                var bj=document.getElementById("bj");
                bj.innerHTML="六盘水";
            });
            myClick("btn07",function(){
                var city=document.getElementById("city");
                /* 
                    使用innerHTML也可以完成DOM增删改的相关操作
                一般我们会将两种方式结合使用
                */
                // city.innerHTML+="<li>昆明</li>";
                //创建一个li
                var li=document.createElement("li");
                //向li中设置文本
                li.innerHTML="广州";
                //将li添加到city中
                city.appendChild(li);

            })
        
        };

       
        function myClick(idStr,fun){
            var btn=document.getElementById(idStr);
            btn.onclick=fun;
            
        }
    </script>
</head>
<body>
      <div id="total">
        <div class="inner">
            <button id="btn01">点一下btn01</button>
            <button id="btn02">点一下btn02</button>
            <button id="btn03">点一下btn03</button>
            <button id="btn04">点一下btn04</button>
            <button id="btn05">点一下btn05</button>
            <button id="btn06">点一下btn06</button>
            <button id="btn07">点一下btn07</button>


            <p>你喜欢哪个城市？</p>
            <ul id="city">
                <li id="bj">北京</li>
                <li>上海</li>
                <li>武汉</li>
                <li>丹东</li>
                <li>深圳</li>
            </ul>
        </div>

    </div>
</body>
</html>